import * as THREE from 'three'
import Experience from './Experience';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
/**
 * 注意 
 * css转换成mesh添加到场景中
 * 单独放入一个group内无法通过包围盒获取几何中心
 * 需要连同其他group一起变换
 */
export default class CssRender {
    constructor() {
        this.experience = new Experience();
        this.cssRenderer = new CSS3DRenderer();
        this.setCssRenderer();
    }
    setCssRenderer() {
        this.cssRenderer.setSize(this.experience.sizes.width, this.experience.sizes.height)
        this.cssRenderer.domElement.style.position = "absolute";
        this.cssRenderer.domElement.style.top = "0px";
        this.cssRenderer.domElement.style.left = "0px";
        this.cssRenderer.domElement.style.pointerEvents = "none";
    
        this.experience.outBox.appendChild(this.cssRenderer.domElement);
    }
    update(){
        this.cssRenderer.render(this.experience.scene, this.experience.camera.perspectiveCamera);
        
    }
    resize(){
        this.cssRenderer.setSize(this.experience.sizes.width, this.experience.sizes.height)
    }
}